<template>
	<view class="container">
		<u--form :labelStyle="{fontSize: '28rpx', color: '#312C2A', height: '80rpx'}" labelWidth="100"
                 labelPosition="left"
                 :model="model"
                 :rules="rules"
                 errorType="message"
                 ref="uForm"
        >
            <view class="form">
                <u-form-item label="提现金额" prop="price" borderBottom >
                    <u--input type="digit" inputAlign="right" placeholder="请输入提现金额" v-model="model.price"
                              border="none"></u--input>
                </u-form-item>
            </view>
            <view class="form">
                <u-form-item label="姓名" prop="name" borderBottom >
                    <u--input inputAlign="right" placeholder="请输入姓名" v-model="model.name"
                              border="none"></u--input>
                </u-form-item>
            </view>
            <view class="form">
                <u-form-item label="开户行" prop="bank" borderBottom >
                    <u--input inputAlign="right" placeholder="请输入开户行" v-model="model.bank"
                              border="none"></u--input>
                </u-form-item>
            </view>
            <view class="form">
                <u-form-item label="银行卡号" prop="bank_no" borderBottom >
                    <u--input type="text" inputAlign="right" placeholder="请输入提现银行卡号" v-model="model.bank_no"
                              border="none"></u--input>
                </u-form-item>
            </view>
		</u--form>

		<!-- 提现说明 -->
		<view class="explan-box">
			<view class="title">提现说明：</view>
			<view class="tip">注意：提现金额将进行审核预计3-5个工作日到账；</view>
			<view class="tip">请确认您的卡号是否正确；如果输入错误，后果自行承担；</view>
		</view>
	</view>

	<view class="btn">
		<u-button throttleTime="1000" :customStyle="{height: '86rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="withdrawalConfirm">确认提现</u-button>
	</view>

	<!-- 提现模态框 -->
	<u-modal showCancelButton :show="withdrawalPop" title="提现至银行卡" @cancel="withdrawalPop = false" @confirm="handleSubmitWithdrawal" confirmColor="#516DDB">
		<view class="confirm-tip">是否要确定提现至银行卡？</view>
	</u-modal>
</template>

<script setup>
    import { onLoad, onReady } from '@dcloudio/uni-app'
    import { ref } from 'vue'
    import {submitWithdrawal} from "@/api/user";

    const uForm = ref(null)
    const withdrawalPop = ref(false)
    const model = ref({
        price: '',
        name: '',
        bank: '',
        bank_no: '',
    })

    const rules = ref({
        name: [
            {
                required: true,
                message: '请输入姓名',
                trigger: ['blur','change'],
            },
        ],
        price: [
            {
                type: 'number',
                required: true,
                message: '请输入提现金额',
                trigger: ['blur','change'],
                min: 0
            }
        ],
        bank: [
            {
                type: 'string',
                required: true,
                message: '请输入开户行',
                trigger: ['blur','change'],
            }
        ],
        bank_no: [
            {
                type: 'string',
                required: true,
                message: '请输入开户行卡号',
                trigger: ['blur','change'],
            }
        ],
    })

    onReady(() => {
        uForm.value.setRules(rules)
    })

    const withdrawalConfirm = () => {
        uForm.value.validate().then(async ({ valid }) => {
            if (valid) {
                uni.showToast({
                    mask: true,
                    title: '验证失败',
                    icon: 'error'
                })
                return false
            } else {
                let bank_no = model.value.bank_no + ''
                if (bank_no.length < 14) {
                    uni.showModal({
                        title: '提示',
                        content: "请填写正确的银行卡号",
                        showCancel: false,
                        success: function (res) {
                            if (res.confirm) {
                                console.log('用户点击确定');
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });

                    return false;
                }
                if (model.value.price <= 0) {
                    uni.showModal({
                        title: '提示',
                        content: "请填写正确的提现金额",
                        showCancel: false,
                        success: function (res) {
                            if (res.confirm) {
                                console.log('用户点击确定');
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
                    return false;
                }
                withdrawalPop.value = true
            }
        }).catch(err => {
            console.log('验证失败',err)
        })
    }

    /**
     * 发起申请
     * @returns {Promise<void>}
     */
    const handleSubmitWithdrawal = async() => {
        console.log('申请提现')
        let param = {
            price: model.value.price,
            name: model.value.name,
            bank: model.value.bank,
            bank_no: model.value.bank_no,
        }
        uni.showLoading({
            title: '请求中'
        });
        try {
            const {code, data, message} = await submitWithdrawal(param)
            uni.hideLoading();
            if (code == 1) {
                uni.showToast({
                    mask: true,
                    title: '申请成功',
                    icon: 'success'
                })

                setTimeout(() => {
                    let pages = getCurrentPages(); // 当前页面
                    let beforePage = pages[pages.length - 2]; // 上一页
                    uni.navigateBack({
                        success: function() {
                            beforePage.onLoad(); // 执行上一页的onLoad里面的方法方法
                        }
                    });
                },800)
            } else {
                uni.showModal({
                    title: '提示',
                    content: message ?? "申请失败",
                    showCancel: false,
                    success: function (res) {
                        if (res.confirm) {
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            }
        } catch (e) {
            uni.hideLoading();
            console.error(e)
        }
    }
</script>

<style lang="scss" scoped>
	.container {
		padding: 50rpx 26rpx;
		.form {
			padding: 0 44rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			margin-bottom: 30rpx;
		}
	}
	.self-set {
		@include end(100%);
	}
	.btn {
		padding: 0 55rpx;
		width: 100%;
		position: fixed;
		left: 50%;
		bottom: 70rpx;
		transform: translateX(-50%);
		z-index: 999;
	}
	.explan-box {
		margin-top: 40rpx;
		padding: 0 10rpx;
		.title {
			color: #000000;
			font-weight: bold;
			margin-bottom: 18rpx;
		}
		.tip {
			font-size: 26rpx;
			color: #999999;
		}
	}

	.confirm-tip {
		font-size: 30rpx;
		color: #312C2A;
		text-align: center;
	}
</style>
